import {TabIcons, Tabs, TabTitles, HasAddIcon} from "./tableconfig.js";
import {renderTable} from "./table.js";

// 创建左侧页签
export function addTabs() {
    let ul = document.getElementById("tabContainer");
    const iconAdd = document.getElementById('iconAdd');
    for (let tab in Tabs) {
        if (!Tabs.hasOwnProperty(tab)) {
            continue
        }
        let tabName = Tabs[tab];
        let iconPath = String(TabIcons.get(tabName));

        let li = document.createElement("li");
        ul.appendChild(li);
        li.classList.add("member-item");

        let img = document.createElement("img");
        li.appendChild(img);
        img.src = iconPath;
        img.alt = "图标";
        img.classList.add("member-icon");

        let span = document.createElement("span");
        li.appendChild(span);
        span.textContent = tabName;
        span.classList.add("member-label");

        if (HasAddIcon.get(tabName) === false) {
            iconAdd.style.display = 'none';
            onClickTab(li);
        }

        li.addEventListener('click', function(event) {
            if (HasAddIcon.get(tabName) === false) {
                iconAdd.style.display = "none";
            } else {
                iconAdd.style.display = "block";
            }
            onClickTab(li);
        })
    }
}

function onClickTab(tab) {
    let tabName = tab.innerText.trim();

    // 修改指定页签为选中态
    renderTabActive(tab);

    // 修改大标题
    renderTitle(tabName);

    // 修改子标题
    renderChildTitle(tabName);

    // 渲染表格
    renderTable(tabName);
}

// 标记页面左侧页签选中态
function renderTabActive(tab) {
    const tabs = document.querySelectorAll('.member-item');
    tabs.forEach(function (eachTab, index) {
        eachTab.classList.remove('active');
    });
    tab.classList.add('active');
}

// 修改大标题
function renderTitle(tabName) {
    let title = document.querySelector('body > div.page-container > div.right-side > div.web-body > div > h1');
    title.innerText = TabTitles.get(tabName);
}

// 修改小标题
function renderChildTitle(tabName) {
    let childTitle = document.querySelector("body > div.page-container > div.right-side > div.web-body > div > div > div > span");
    childTitle.innerText = TabTitles.get(tabName);
}